<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    back
    :bg-color="uNavColor"
    :showTop="showTop"
    :dark="loaded ? false : true"
    :hideSafeArea="true"
    title="身份校验"
  >
    <view
      class="validate-container"
      :style="'padding-top:' + navHeight + 'px;'"
    >
      <view class="title">
        <text class="title-text">身份校验</text>
      </view>
      <u-form :model="form" class="form" ref="uForm" label-position="top">
        <u-form-item label="姓名" prop="name">
          <u-input v-model="form.name" placeholder="请输入姓名" />
        </u-form-item>
        <u-form-item label="身份证号" prop="idCard">
          <u-input v-model="form.idCard" placeholder="请输入身份证号" />
        </u-form-item>
      </u-form>
      <view class="btn-container">
        <u-button type="primary" shape="circle" @click="submitForm"
          >点击校验</u-button
        >
      </view>
    </view>
  </page-wrap>
</template>

<script>
import { offlineCheck } from '@/api/modules/career';
import { set } from 'vue';

export default {
  data() {
    return {
      navHeight: getApp().globalData.navHeight,
      form: {
        // name: '江璟皓58',
        // idCard: '450481198805010158'
        name: '',
        idCard: ''
      },
      showTop: false,
      uNavColor: '#beecfb',
      rules: {
        name: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur,change'
          }
        ],
        idCard: [
          {
            required: true,
            validator: (rule, value, callback) => {
              return this.$u.test.idCard(value);
            },
            message: '请输入正确的身份证号',
            trigger: 'blur,change'
          }
        ]
      },
      cardType: '',
      type: '',
      setCode: '',
      value: ''
    };
  },
  // 如果有其他类似项目，使用 AI智能面试上的公用接口 /api-yp/wechat/getMpUrlLink 来生成断链
  onLoad(opt) {
    // c=56&t=edit&s=LB_TRACK_SERVICE&v=3
    // console.log(opt, 'opt------------');
    this.cardType = opt.c;
    this.type = opt.t;
    this.setCode = opt.s;
    this.value = opt.v;
    this.cardType && uni.setStorageSync('offline_cardType', this.cardType);
    this.type && uni.setStorageSync('offline_type', this.type);
    this.setCode && uni.setStorageSync('offline_setCode', this.setCode);
    this.value && uni.setStorageSync('offline_value', this.value);
  },
  onPageScroll(res) {
    this.showTop = res.scrollTop > 0;
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    submitForm() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          const params = {
            cardType: this.cardType,
            type: this.type,
            setCode: this.setCode,
            value: this.value,
            dataSet: [
              { setKey: 'name', setValue: this.form.name },
              { setKey: 'idCard', setValue: this.form.idCard }
            ]
          };
          offlineCheck(params).then((res) => {
            if (res.code === 200) {
              uni.setStorageSync('offline_personId', res.data);
              uni.showToast({
                title: '校验成功',
                icon: 'none'
              });
              setTimeout(() => {
                uni.navigateTo({ url: '/pagesSub/offlineServiceInfo/index' });
              }, 1000);
            } else {
              uni.showToast({
                title: res.status_desc,
                icon: 'none'
              });
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.validate-container {
  width: 100%;
  height: 100vh;
  // background-image: url('https://img3.job1001.com/ypMp/elan/images/careerPath/person-info-bg.png?v=1');
  background-repeat: no-repeat;
  background-size: 100% 100vh;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  ::v-deep .u-form {
    background: $uni-bg-color;
    border-radius: 24rpx;
    .u-form-item {
      .u-form-item--left__content__label {
        font-weight: bold;
        font-size: 30rpx;
        color: #222222;
      }

      .btn-group {
        padding: 0 24rpx;
        line-height: 102rpx;
        .cancel,
        .confirm {
          padding: 0 16rpx;
        }
      }
    }
  }
  .title {
    margin: 150rpx 0 10rpx 0;
    padding: 32rpx 0;
    .title-text {
      font-size: 52rpx;
      font-weight: 600;
      color: #222222;
    }
  }
  .form {
    width: calc(100% - 32rpx);
    background-color: #fff;
    border-radius: 24rpx;
    padding: 0 24rpx;
  }
  .btn-container {
    width: 100%;
    margin-top: 82rpx;
  }
}
</style>
